<!-- 巡护记录详情信息（基本信息，考勤，轨迹） -->
<script setup>
import { reactive, toRefs, ref, watch } from 'vue';
import { ElDivider } from 'element-plus';
import { BASE_FILE_PATH } from '@/apis/index';
import { CLEAR_POPUP_MAP, GET_MAPBOX_MAP, REMOVE_LAYER, REMOVE_MAP_IMG } from '../common/common-map-fun';

const props = defineProps({
  detailShow: Boolean,
  patrolInfoObj: Object,
  lookItemDetail: Object,
});
const { detailShow, patrolInfoObj, lookItemDetail } = toRefs(props);
const emit = defineEmits(['handleCloseDetailShow']);
const icon_map = reactive({
  icon_1: new URL('../../../assets/images/icon/基本信息-选中.png', import.meta.url).href,
  icon_1_: new URL('../../../assets/images/icon/基本信息-未选中.png', import.meta.url).href,
  icon_2: new URL('../../../assets/images/icon/轨迹-选中.png', import.meta.url).href,
  icon_2_: new URL('../../../assets/images/icon/轨迹-未选中.png', import.meta.url).href,
  icon_3: new URL('../../../assets/images/icon/考勤-选中.png', import.meta.url).href,
  icon_3_: new URL('../../../assets/images/icon/考勤-未选中.png', import.meta.url).href,

  icon_4: new URL('../../../assets/images/icon/电话.png', import.meta.url).href,
  icon_5: new URL('../../../assets/images/icon/管护站.png', import.meta.url).href,
});

const checkedTabItem = ref('基本信息');

watch(
  lookItemDetail,
  (val) => {
    if (val) {
      checkedTabItem.value = '基本信息';
    }
  },
  { deep: true },
);

const handleCloseOpen = () => {
  emit('handleCloseDetailShow');
  CLEAR_MAP_LAYER();
};

const handleCheckedItem = (str) => {
  checkedTabItem.value = str;
  CLEAR_MAP_LAYER();
};

// 清除图层数据
const CLEAR_MAP_LAYER = () => {
  const map = GET_MAPBOX_MAP();

  REMOVE_MAP_IMG('user-point-dot');

  map.getStyle().layers.map((item) => {
    if (['MEASURE_POINT_C', 'MAP_LINE_XH', 'MAP_POINT_XH'].includes(item?.metadata?.group) && ['source'] in item) {
      CLEAR_POPUP_MAP();

      REMOVE_LAYER(item.id);
      REMOVE_MAP_IMG(item.id);
    }
  });
};
</script>
<template>
  <div v-if="detailShow" class="detail_root_">
    <div class="detail_content">
      <header>
        <div class="title">巡护员详情</div>
        <p class="close_btn" @click="handleCloseOpen">X</p>
      </header>

      <div class="main_detail">
        <div class="main_top">
          <img :src="`${BASE_FILE_PATH}${patrolInfoObj?.baseInfo?.avatar}`" />
          <div class="bas_">
            <h2>{{ patrolInfoObj?.baseInfo?.userName }}</h2>
            <h4><img :src="icon_map.icon_4" />{{ patrolInfoObj?.baseInfo?.account }}</h4>

            <h4>
              <img :src="icon_map.icon_5" />
              <span class="span_over" :title="patrolInfoObj?.baseInfo?.positionNames">{{
                patrolInfoObj?.baseInfo?.positionNames ?? ''
              }}</span>
            </h4>
          </div>
        </div>
        <div class="main_tab">
          <div class="tab_item" @click="handleCheckedItem('基本信息')">
            <img :src="checkedTabItem == '基本信息' ? icon_map.icon_1 : icon_map.icon_1_" />
            <p :class="checkedTabItem == '基本信息' ? 'p_' : ''">基本信息</p>
          </div>
          <ElDivider direction="vertical" />
          <div class="tab_item" @click="handleCheckedItem('轨迹')">
            <img :src="checkedTabItem == '轨迹' ? icon_map.icon_2 : icon_map.icon_2_" />
            <p :class="checkedTabItem == '轨迹' ? 'p_' : ''">轨迹</p>
          </div>
          <ElDivider direction="vertical" />
          <div class="tab_item" @click="handleCheckedItem('考勤')">
            <img :src="checkedTabItem == '考勤' ? icon_map.icon_3 : icon_map.icon_3_" />
            <p :class="checkedTabItem == '考勤' ? 'p_' : ''">考勤</p>
          </div>
        </div>
        <div class="main_bottom"></div>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.detail_root_ {
  position: absolute;
  top: 100px;
  right: 20px;
  z-index: 2;
  box-sizing: border-box;
  width: 495px;
  min-height: 420px;
  padding: 19px 21px 28px 18px;
  color: #ffffff;
  background: rgba(24, 33, 47, 0.56);
  border-radius: 6px;

  .detail_content {
    position: relative;
    width: 100%;
    height: 100%;
    header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding-bottom: 16px;
      font-size: 18px;
      letter-spacing: 2px;
      border-bottom: 1px solid rgba(246, 247, 246, 0.1);
      .title {
        color: #ffffff;
        font-size: 18px;
        font-family: Source Han Sans CN;
        line-height: 20px;
      }
    }
    .close_btn {
      margin-left: 24px;
      cursor: pointer;
    }
  }

  .main_detail {
    height: 100%;
    padding-top: 25px;

    .span_over {
      width: 307px;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
    }

    .main_top {
      display: flex;
      align-items: center;
      justify-content: flex-start;
      // height: 114px;
      img {
        width: 94px;
        height: 95px;
      }
      .bas_ {
        margin-left: 18px;
        img {
          width: 30px !important;
          height: 30px !important;
        }

        h2 {
          font-weight: 600;
          font-size: 20px;
        }

        h4 {
          display: flex;
          align-items: center;
          margin: 5px 0;
          letter-spacing: 2px;
        }
      }
    }
    .main_tab {
      display: flex;
      align-items: center;
      justify-content: space-between;
      height: 40px;
      margin-top: 20px;
      background: rgba(228, 228, 228, 0.1);
      img {
        width: 30px;
        height: 30px;
      }
      p {
        margin-left: 8px;
      }

      .tab_item {
        display: flex;
        align-items: center;
        padding: 12px;
        cursor: pointer;

        &:hover {
          color: #9fc2ff;
        }
        .p_ {
          color: #9fc2ff;
        }
      }
    }
  }

  .main_bottom {
    height: 100%;
    padding-top: 21px;
  }
}
</style>
